<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Shevy Demo</title>

  <link rel="stylesheet" href="dist/style.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>Shevy</h1>
      <h3>Perfect typography. Vertical rhythm made easy.</h3>
    </header>

    <p>
      Vertical rhythm, the "pace" at which objects and words are spaced vertically on a page. It's one of life's most unnoticeable pleasantries. It only sticks out when it's bad.
    </p>

    <p>
      People shouldn't miss your message because of poorly spaced typography, and you shouldn't have to spend more time than necessary getting vertical rhythm correct. While Shevy can't help you pick out the best fonts, it'll make sure your fonts are perfectly spaced up and down the page.
    </p>

    <p>
      Did I mention it works responsively, too?
    </p>

    <p>
      That's right. You can reset your typography module by module, breakpoint by breakpoint and maintain perfect vertical rhythm (within your module or breakpoint of course).
    </p>

    <p>
      Check it out.
    </p>

    <div class="shevy">
      <p>Default <code>$shevy</code> font sizes</p>

      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor, eveniet cupiditate, rerum doloribus id voluptatibus unde quasi laborum tempora repellat saepe aperiam, reiciendis? Molestiae dicta ipsam incidunt dolor sunt soluta voluptatum iusto. Voluptate in eligendi numquam, placeat, magnam aspernatur reiciendis perferendis a rem! Quaerat, beatae, sint. Iusto mollitia, facere.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero itaque non, quo possimus quibusdam provident nihil ut magnam! Eum sunt qui quae rem, perferendis atque quia ipsam ex at culpa laboriosam omnis dicta quis blanditiis aspernatur, fugit quas voluptate debitis nostrum tempore! Eius, aliquid, quo.
      </p>
    </div>

    <div class="large">
      <p>Using a large font scale in a custom <code>$large</code> map.</p>

      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor, eveniet cupiditate, rerum doloribus id voluptatibus unde quasi laborum tempora repellat saepe aperiam, reiciendis? Molestiae dicta ipsam incidunt dolor sunt soluta voluptatum iusto. Voluptate in eligendi numquam, placeat, magnam aspernatur reiciendis perferendis a rem! Quaerat, beatae, sint. Iusto mollitia, facere.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero itaque non, quo possimus quibusdam provident nihil ut magnam! Eum sunt qui quae rem, perferendis atque quia ipsam ex at culpa laboriosam omnis dicta quis blanditiis aspernatur, fugit quas voluptate debitis nostrum tempore! Eius, aliquid, quo.
      </p>
    </div>

    <div class="responsive">
      <p>Responsive typography with five <code>$responsive</code> maps.</p>

      <h1>Heading 1</h1>
      <h2>Heading 2</h2>
      <h3>Heading 3</h3>
      <h4>Heading 4</h4>
      <h5>Heading 5</h5>
      <h6>Heading 6</h6>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor, eveniet cupiditate, rerum doloribus id voluptatibus unde quasi laborum tempora repellat saepe aperiam, reiciendis? Molestiae dicta ipsam incidunt dolor sunt soluta voluptatum iusto. Voluptate in eligendi numquam, placeat, magnam aspernatur reiciendis perferendis a rem! Quaerat, beatae, sint. Iusto mollitia, facere.
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero itaque non, quo possimus quibusdam provident nihil ut magnam! Eum sunt qui quae rem, perferendis atque quia ipsam ex at culpa laboriosam omnis dicta quis blanditiis aspernatur, fugit quas voluptate debitis nostrum tempore! Eius, aliquid, quo.
      </p>
    </div>

    <h2>Wait. There's more.</h2>

    <p>
      There's also this neat little <code>base-spacing()</code> function (with an alias to shorten it to <code>bs()</code>). <code>base-spacing()</code> takes two arguments, a <code>$factor</code> (defaults to 1) and a <code>$map</code> (defaults to <code>$shevy</code>). This function will calculate the base spacing by multiplying the <code>base-font-size</code> by the <code>base-line-height</code>. It will then multiply that base spacing by the factor provided and thus supply you with a value that aligns with your vertical rhythm.
    </p>

    <p>
      Check out the box below. It's 2 base-spacings tall.
    </p>

    <div class="box"></div>

    <p>
      Because we can supply a map as the second argument, we can adjust the base-spacing value on the fly. For example, let's use the responsive maps we used above on the box below.
    </p>

    <div class="responsive">
      <div class="box"></div>
    </div>

    <footer class="footer">
      <p>
        Big thanks to <a href="http://basehold.it/">basehold.it</a> for the ability to apply baseline backgrounds through out this project. Use them for your own vertical rhythm debugging.
      </p>

      <p>
        Copyright @2015-2016 Kyle Shevlin. All Rights Reserved. Free to use under the MIT license.
      </p>
    </footer>
  </div>
  <!-- /.container -->
</body>
</html>
